<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('临床招募列表')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <th:block th:include="include :: summernote-css"/>
    <th:block th:include="include :: bootstrap-select-css"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: jquery-smartwizard-css"/>
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: datetimepicker-css"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="col-sm-12 search-collapse ifcomebody1">
        <form id="formId">
            <div class="select-list">
                <ul>
                    <li>
                        <label>短标题</label>
                        <input type="text" name="title"  onkeyup="enterShow()" placeholder="请输入短标题"/>
                    </li>
                    <li>
                        <label class="col-sm-3 control-label label-size1 label-jibing">招募阶段</label>
                        <select class="form-control m-b" name="stage" id="stage"
                                th:with="type=${@dict.getType('recruitment_stage')}" data-placeholder="请选择招募阶段"
                                lay-search="">
                            <option value="">请选择招募阶段</option>
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                    th:value="${dict.dictValue}"></option>
                        </select>
                    </li>
                    <li>
                        <label class="col-sm-3 control-label label-size1">选择科目 </label>
                        <div class="col-sm-9">
                            <select class="form-control select2-multiple" name="pid" id="pid"
                                    th:with="type=${@commonService.selectDiseaseByPid('0')}"
                                    onchange="selectDiseaseChild(0)" data-placeholder="请选择科目">
                                <option value="">请选择科目</option>
                                <option th:each="dict : ${type}" th:text="${dict.name}"
                                        th:value="${dict.id}"></option>
                            </select>
                        </div>
                    </li>
                    <li>
                        <label class="col-sm-3 control-label label-size1 label-jibing">选择疾病 </label>
                        <select class="form-control select2-multiple" id="diseaseId" name="diseaseId" data-placeholder="请选择疾病">
                            <option value="">请选择疾病</option>
                        </select>
                    </li>
                    <li>
                        <label>起止时间 </label>
                        <div class="input-daterange input-group">
                            <input type="text" class="time-input form-control" name="startTime" onkeyup="enterShow()" id="laydate-startTime"
                                   placeholder="开始时间"/>
                            <span class="input-group-addon">到</span>
                            <input type="text" class="time-input form-control" name="endTime" onkeyup="enterShow()" id="laydate-endTime"
                                   placeholder="结束时间"/>
                        </div>
                    </li>
                    <li>
                        <label>试验中心</label>
                        <select name="trialArea" class="form-control"
                                th:with="type=${@dict.getType('provinces_code')}" data-placeholder="请选择试验中心">
                            <option value="">请选择试验中心</option>
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                    th:value="${dict.dictValue}"></option>
                        </select>
                    </li>
                    <li>
                        <label>治疗阶段</label>
                        <select name="treatmentStage" class="form-control"
                                th:with="type=${@dict.getType('treatment_stage')}" data-placeholder="请选择治疗阶段">
                            <option value="">请选择治疗阶段</option>
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                    th:value="${dict.dictValue}"></option>
                        </select>
                    </li>
                    <li>
                        <a class="btn btn-chongzhi btn-rounded mr16 btn-sm" onclick="$.form.reset()">重置</a>
                        <a class="btn btn-chaxun  mr16 btn-rounded btn-sm" onclick="$.table.search()">查询</a>
                    </li>
                </ul>
            </div>
        </form>
    </div>

    <div class="btn-group-sm" style="display: flex;" id="toolbar" role="group">
        <a class="btn btn-dataadd" onclick="$.operate.add()" shiro:hasPermission="ydz:clinical:add">
            <i class="fa fa-plus"></i> 添加
        </a>
        <a class="btn btn-newadd single disabled" onclick="$.operate.edit()"
           shiro:hasPermission="ydz:clinical:edit">
            <i class="fa fa-edit"></i> 修改
        </a>
        <a class="btn btn-newadd multiple disabled" onclick="$.operate.removeAll()"
           shiro:hasPermission="ydz:clinical:remove">
            <i class="fa fa-remove"></i> 删除
        </a>
        <a class="btn btn-newadd" onclick="$.table.exportExcel()" shiro:hasPermission="ydz:clinical:export">
            <i class="fa fa-download"></i> 导出
        </a>
    </div>
    <div class="col-sm-12 select-table table-striped ifcomebody drugTable">
        <table id="bootstrap-table" class="text-nowrap"></table>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<th:block th:include="include :: summernote-js"/>
<th:block th:include="include :: jquery-smartwizard-js"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('ydz:clinical:edit')}]];
    var removeFlag = [[${@permission.hasPermi('ydz:clinical:remove')}]];
    var diseaseDatas = [[${@commonService.selectDiseaseByPid('0')}]];
    //招募状态字典
    var stagedict = [];
    var prefix = ctx + "ydz/clinical";

    $(function () {
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            modalName: "临床招募",
            fixedColumns: true,//固定列
            fixedNumber:2,//固定前两列
            sortName: "createTime",
            sortOrder: "desc",
            columns: [{
                checkbox: true
            },
                        {
                            field: 'id',
                            title: 'ID',
                            width: 80,
                        },
                        {
                            field: 'title',
                            title: '标题',
                            width: 360,
                            widthUnit: "px",
                            formatter: function (value, row, index) {
                                return $.table.tooltip(value, 24);
                            }
                        },
                        {
                            field: 'stage',
                            title: '阶段',
                            formatter: function (value, row, index) {
                                return $.table.selectDictLabel([[${@dict.getType('recruitment_stage')}]], value);
                            }
                        },
                        // {
                        //     field: 'sexType',
                        //     title: '类型',
                        //     formatter: function (value, row, index) {
                        //         if(value == '0'){return '女'}else if(value == '1'){return '男'}else if(value == '2'){return '男女不限'}else{return ''}
                        //     }
                        // },
                        {
                            field: 'trialName',
                            title: '试验分期',
                            // formatter: function (value, row, index) {
                            //     var ids = $.table.selectDictLabels([[${@dict.getType('trial_staging')}]], value, ",");
                            //     if (!value) {
                            //         return "暂未选择试验分期"
                            //     } else {
                            //         return `<div class='lineclamp1 whsnowrap maxw'>${ids}</div> `
                            //     }
                            // }
                        },
                        {
                            field: 'drug',
                            title: '药品名称',
                            width: 240,
                            widthUnit: "px",
                            formatter: function (value, row, index) {
                                return $.table.tooltip(value, 16);
                            }
                        },
                        {
                            field: 'state',
                            title: '发布状态',
                            formatter: function (value, row, index) {
                                return statusTools(row);
                            }
                        },
                        {
                            field: 'createName',
                            title: '创建人名称'
                        },
                        {
                            field: 'createTime',
                            title: '创建时间'
                        },
                {
                    title: '操作',
                    align: 'center',
                    width: 120,
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-caozuo btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')">编辑</a> ');
                        actions.push('<a class="btn btn-caozuo btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')">删除</a>');
                        actions.push('<a class="btn btn-caozuo btn-xs" href="javascript:void(0)" onclick="openShow(\'' +  row.id +  '\' , \'' +  row.state +  '\')">查看</a> ');

                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    });
    function openShow(id,releaseState){
        //发布状态 （1.未发布；2.已发布）
        if (releaseState == 0){
            $.modal.alertWarning("暂未启用...");
        }else if(releaseState == 1){
            window.open("https://www.1blv.cn/lczmxq/" + id + ".html")
        }
    }
    /*发布状态显示 */
    function statusTools(row) {
        if (row.state == 1) {
            return '<img class="list-switch" src="/img/list-switch1.svg" onclick="disable(\'' + row.id + '\')"></img> ';
        } else {
            return '<img class="list-switch" src="/img/list-switch2.svg" onclick="enable(\'' + row.id + '\')"></img> ';
        }
    }

    /* 未发布 */
    function disable(id) {
        $.modal.popUpConfirm("确认要取消发布吗？", function () {
            // $.operate.post(prefix + "/edit", {"id": id, "releasestate": 1});
            var jsons = {"id": id, "state": 0};
            var jsonvalue = JSON.stringify(jsons)
            save(prefix + "/editState", jsonvalue);

        })
    }

    /* 已发布 */
    function enable(id) {
        $.modal.popUpConfirm("确认要启用发布吗？", function () {
            // $.operate.post(prefix + "/edit", {"id": id, "releasestate": 2});
            var jsons = {"id": id, "state": 1};
            var jsonvalue = JSON.stringify(jsons)
            save(prefix + "/editState", jsonvalue);

        })
    }

    function save(url, data, callback) {
        var config = {
            url: url,
            type: "post",
            dataType: "json",
            data: data,
            headers: {
                'Content-Type': 'application/json;charset=utf8'
            },
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍候...");
                $.modal.disable();
            },
            success: function (result) {
                if (typeof callback == "function") {
                    callback(result);
                }
                $.operate.successCallback(result);
            }
        };
        $.ajax(config)
    }
    $(document).ready(function () {
    //查询临床招募状态字典
        $.ajax({
            url: "/api/common/getDictByType/recruitment_stage",
            type: "get",
            success: res => {
                var factoryList = res.data
                for (let i = 0; i < factoryList.length; i++){
                    let val = {}
                    val.dictLabel = factoryList[i].dictLabel
                    val.dictCode = factoryList[i].dictCode
                    stagedict.push(val)
                }
            }
        })
    })

    function selectDiseaseChild(type){

        let diseaseChild;
        let optionList=[];

        let department = $('#pid').val();
        if(type==1){
            department = $('#unActivityPid').val();
        }
        diseaseDatas.forEach(function (disease) {
            if(disease.id==department){
                diseaseChild=disease.diseaseList;
            }
        })
        if(diseaseChild){
            optionList.push("<option value=''>请选择疾病</option>")
            diseaseChild.forEach(function (disease) {
                optionList.push("<option value='"+disease.id+"'>"+disease.name+"</option>")
            })
        }else {
            optionList.push("<option value=''>请选择科目</option>")
        }
        if(type==1){
            $("#unActivityDiseaseid").html(optionList)
        }else {
            $("#diseaseId").html(optionList)
        }

    }
    /*发布状态显示 */
    function statusTools(row) {
        if (row.state == 1) {
            return '<img class="list-switch" src="/img/list-switch1.svg" onclick="disable(\'' + row.id + '\')"></img> ';
        } else {
            return '<img class="list-switch" src="/img/list-switch2.svg" onclick="enable(\'' + row.id + '\')"></img> ';
        }
    }

    /* 未发布 */
    function disable(id) {
        $.modal.popUpConfirm("确认要取消发布吗？", function () {
            // $.operate.post(prefix + "/edit", {"id": id, "releasestate": 1});
            var jsons = {"id": id, "state": 0};
            var jsonvalue = JSON.stringify(jsons)
            save(prefix + "/edit", jsonvalue);

        })
    }

    /* 已发布 */
    function enable(id) {
        $.modal.popUpConfirm("确认要启用发布吗？", function () {
            // $.operate.post(prefix + "/edit", {"id": id, "releasestate": 2});
            var jsons = {"id": id, "state": 1};
            var jsonvalue = JSON.stringify(jsons)
            save(prefix + "/edit", jsonvalue);

        })
    }
</script>
</body>
</html>